/**
 * SimpRead: Read mode
 */

.simpread-font {
    font: 300 16px/1.8 -apple-system, PingFang SC, Microsoft Yahei, Lantinghei SC, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;

    color:#333;

    text-rendering: optimizelegibility;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

.simpread-hidden {
    display: none;
}

/**
 *  Read: background( root ) style
 */
 .simpread-read-root {
    display: -webkit-flex;
    justify-content:center;
    align-items:center;

    position: relative;
    margin: 0;

    top: -1000px;
    left: 0;

    width: 100%;

    z-index: 2147483646;

    overflow-x: hidden;
    opacity: 0;
    transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
}

.simpread-read-root-show {
    top: 0;
}

.simpread-read-root-hide {
    top: 1000px;
}

/**
 * Read: Read mode style
 */
sr-read {
    display: -webkit-flex;
    flex-flow:column nowrap;

    margin: 20px 20%;

    min-width: 400px;
    min-height: 400px;

    text-align: center;
}

read-process {
    position: fixed;

    top: 0;
    left: 0;

    height: 3px;
    width: 100%;

    background-color: #64B5F6;
    transition: width 2s;
    z-index: 20000;
}

sr-rd-content-error {
    display: block;
    position: relative;

    margin: 0px;
    margin-bottom: 30px;
    padding: 25px;

    background-color: rgba(0,0,0,0.05);
}

sr-rd-footer {
    display: flex;
    flex-direction: column;

    font-size: 14px;
}

sr-rd-footer-group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

sr-rd-footer-line {
    width: 100%;
    border-top: 1px solid #E0E0E0;
}

sr-rd-footer-text {
    min-width: 150px;
}

sr-rd-footer-copywrite {
    margin: 10px 0 0 0;
    color: inherit;
}

sr-rd-footer-copywrite abbr {
    font-variant: normal;
    text-decoration: none;
    /*border-bottom: 1px dotted;*/
}

sr-rd-footer-copywrite .second {
    margin: 10px 0;
}

sr-rd-footer-copywrite .third a:hover {
    border: none!important;
}

sr-rd-footer-copywrite .third a:first-child {
    margin-right: 50px;
}

sr-rd-footer-copywrite .sr-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 33px;
    height: 33px;

    opacity: .8;

    transition: opacity .5s ease;
    cursor: pointer;
}

sr-rd-footer-copywrite .sr-icon:hover {
    opacity: 1;
}

sr-rd-footer-copywrite a,
sr-rd-footer-copywrite a:link,
sr-rd-footer-copywrite a:visited {
    margin: 0;
    padding: 0;

    color: inherit;
    background-color: transparent;

    font-size: inherit!important;
    line-height: initial;
    text-decoration: none;
    vertical-align: initial;

    border: none!important;
    /*border-bottom: 1px dotted!important;*/

    box-sizing: border-box;
}

sr-rd-footer-copywrite a:hover,
sr-rd-footer-copywrite a:focus,
sr-rd-footer a:active {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted!important;
}

/**
 * Special blocks
 */
.simpread-blocks {
    text-decoration: none!important;
}

.simpread-blocks * {
    margin: 0;
}

.simpread-blocks a {
    padding: 0;
    text-decoration: none!important;
}

.simpread-blocks img {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/**
 *  Focus: Background( root ) style
 */
.simpread-focus-root {
    display: block;
    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-color: rgba( 235, 235, 235, 0.9 );
    z-index: 2147483645;

    opacity: 0;
    transition : opacity 1s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

.simpread-focus-highlight {
    position: relative;

    box-shadow: 0 0 0 20px #fff;
    background-color: #fff;

    overflow: visible;
    z-index: 2147483646;
}

.sr-controlbar-bg sr-rd-crlbar {
    z-index: 2147483647;
}

.sr-controlbar-bg sr-rd-crlbar fab {
    z-index: 2147483647;
}

/**
 * Controlbar: focus mode and read mode
 */
sr-rd-crlbar.controlbar {
    position: fixed;

    right: 0;
    bottom: 0;

    width: 100px;
    height: 100%;

    opacity: 0;
    transition: opacity .5s ease;
}

sr-rd-crlbar.controlbar:hover {
    opacity: 1;
}

/**
 * Golbal
*/
@media all and ( max-height: 620px ) {

    fab {
        zoom: .8;
    }

}

@media all and ( max-height: 783px ) {

    dialog-gp dialog-content {
        max-height: 580px;
    }

    dialog-gp dialog-footer {
        border-top: 1px solid rgba(224, 224, 224, 1);
    }

}

/**
 * Highlight
 */
.simpread-highlight-selector {
    background-color: #fafafa !important;
    outline: 3px dashed #1976d2 !important;
    opacity: .8 !important;
    cursor: pointer !important;
    transition: opacity .5s ease !important;
}

.simpread-highlight-controlbar {
    position: relative !important;
    background-color: #fafafa !important;
    outline: 3px dashed #1976d2 !important;
    opacity: .8 !important;
    transition: opacity .5s ease !important;
}

simpread-highlight,
sr-snapshot-ctlbar {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 15px;

    height: 50px;

    background-color: rgba(50, 50, 50, .9);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .26);

    box-sizing: border-box;
    z-index: 2147483640;
}

sr-highlight-ctl {
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 0 5px;

    width: 50px;
    height: 20px;

    color: #fff;
    background-color: #1976d2;

    border-radius: 4px;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0,0,0,.12);
    cursor: pointer;
}

/**
 * TOC
 */
toc-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 50px;
    height: 200px;

    font-size: initial;
}

toc-bg:hover {
    z-index: 3;
}

.toc-bg-hidden {
    opacity: 0;
    transition: opacity .5s ease;
}

.toc-bg-hidden:hover {
    opacity: 1;
    z-index: 3;
}

.toc-bg-hidden:hover toc {
    width: 180px;
}

toc * {
    all: unset;
}

toc {
    position: fixed;
    left: 0;
    top: 100px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 10px;

    width: 0;
    max-width: 200px;
    max-height: 500px;

    overflow-x: hidden;
    overflow-y: hidden;
    cursor: pointer;
    border: 1px solid rgba(158, 158, 158, 0.22);
    transition: width .5s;
}

toc:hover {
    overflow-y: auto;
}

toc::-webkit-scrollbar {
    width: 3px;
}

toc::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(139,137,134,0.5);
}


toc outline {
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    padding: 2px 0;
    min-height: 21px;

    line-height: 21px;
    text-align: left;
}

toc outline a,
toc outline a:active,
toc outline a:visited,
toc outline a:focus
{
    display: block;

    width: 100%;

    color: inherit;
    font-size: 11px;
    text-decoration: none!important;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

toc outline a:hover {
    font-weight: bold!important;
}

toc outline a.toc-outline-theme-dark,
toc outline a.toc-outline-theme-night {
    color: #fff!important;
}

.toc-level-h1 {
    padding-left: 5px;
}
.toc-level-h2 {
    padding-left: 15px;
}
.toc-level-h3 {
    padding-left: 25px;
}
.toc-level-h4 {
    padding-left: 35px;
}

.toc-outline-active {
    border-left: 2px solid rgb(244, 67, 54);
}

toc outline active {
    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    padding: 0 0 0 3px;

    border-left: 2px solid #e8e8e8;

}

/**
 * Keyboard
 */

sr-kbd {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 247, 133)), to(rgb(255, 197, 66)));
    border-width: 1px;
    border-style: solid;
    border-color: rgb(227, 190, 35);
    border-image: initial;

    position: absolute;
    left: 0;
    padding: 1px 3px 0px;

    font-size: 11px!important;
    font-weight: bold;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 7px 0px;
    overflow: hidden;
    border-radius: 3px;
}

.sr-kbd-a {
    position: relative;
}

kbd-mapping {
    position: fixed;
    left: 5px;
    bottom: 5px;

    display: flex;
    flex-direction: column;
    flex-flow: row;

    width: 500px;
    height: 625px;

    background-color: #fff;

    border: 1px solid rgba(158, 158, 158, .22);
    box-shadow: 0 2px 5px rgba(0,0,0,.26);
    border-radius: 3px;
}

kbd-maps {
    display: flex;
    flex-flow: column wrap;
    margin-top: 40px;
}

kbd-mapping kbd-map-title {
    position: absolute;
    margin: 5px 0;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
}

kbd-maps-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

kbd-maps-title {
    margin: 5px 0;
    padding-left: 53px;

    font-size: 12px;
    font-weight: bold;
}

kbd-map kbd {
    display: inline-block;
    padding: 3px 5px;
    font-size: 11px;
    line-height: 10px;
    color: #444d56;
    vertical-align: middle;
    background-color: #fafbfc;
    border: solid 1px #c6cbd1;
    border-bottom-color: #959da5;
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 #959da5;
}

kbd-map kbd-name {
    display: inline-block;
    text-align: right;

    width: 50px;
}

kbd-map kbd-desc {
    padding-left: 3px;
}

/**
 * Share card
 */

sharecard-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: rgba(0, 0, 0, .4);

    z-index: 2147483647;
}

sharecard {
    display: flex;
    flex-direction: column;

    max-width: 450px;

    background-color: rgb(100, 181, 246);
}

sharecard-head {
    display: flex;
    flex-direction: column;

    margin: 25px;

    color: #fff;

    border-radius: 10px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.15);
}

sharecard-card {
    display: flex;
    flex-direction: column;
}

sharecard-top {
    display: flex;
    align-items: center;
    justify-content: center;

    padding-right: 5px;

    height: 65px;
    background-color: #fff;

    color: #878787;
    font-size: 25px;
    font-weight: 500;

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

sharecard-top span.logos {
    display: block;

    width: 48px;
    height: 48px;

    margin: 5px;

    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url("");

    zoom: .8;
}

sharecard-content {
    padding: 15px;

    max-height: 500px;

    font-size: 20px;
    text-align: justify;

    background-color: rgb(33, 150, 243);

    overflow-x: hidden;
    overflow-y: auto;
}

sharecard-via {
    padding: 10px;
    font-size: 10px;

    background-color: rgb(33, 150, 243);
}

sharecard-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    padding-right: 5px;

    height: 100px;
    background-color: #fff;

    color: #878787;
    font-size: 15px;
    font-weight: 500;

    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

sharecard-footer div {
    display: flex;
    align-items: center;
}

sharecard-footer span.qrcode {
    display: block;

    width: 100px;
    height: 100px;

    margin: 5px;

    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url("");
}

sharecard-control {
    display: flex;
    flex-direction: row;
    align-items: center;

    padding: 0 19px;

    height: 80px;
    background-color: #fff;
}

/**
 * Snapshot
 */

simpread-snapshot {
    position: fixed;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    cursor: move;
    z-index: 2147483645;
}

sr-mask {
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .1);
}

/**
 * URL Scheme
 */

.simpread-urlscheme,
.simpread-feedback {
    position: fixed;
    right: 20px;
    bottom: 20px;

    z-index: 2147483646;
}

simpread-urlscheme,
simpread-feedback {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;

    padding: 20px 20px 0;

    width: 500px;

    color: rgba(51, 51, 51, .87);
    background-color: #fff;
    border-radius: 3px;

    box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 2px, rgba(0, 0, 0, 0.26) 0px 2px 2px;
    overflow: hidden;

    transform-origin: bottom;
    transition: all .6s ease;
}

simpread-urlscheme *,
simpread-feedback * {
    font-size: 12px!important;
    box-sizing: border-box;
}

simpread-urlscheme.active,
simpread-feedback.active {
    animation-name: srFadeInUp;
    animation-duration: 450ms;
    animation-fill-mode: both;
}

simpread-urlscheme.hide,
simpread-feedback.hide {
    animation-name: srFadeInDown;
    animation-duration: 450ms;
    animation-fill-mode: both;
}

simpread-urlscheme sr-urls-label,
simpread-feedback sr-fb-label {
    width: 100%;
}

simpread-urlscheme sr-urls-head,
simpread-feedback sr-fb-head {
    display: flex;
    align-items: center;
    flex-direction: row;

    margin-bottom: 5px;
    width: 100%;
}

simpread-urlscheme sr-urls-content,
simpread-feedback sr-fb-content {
    margin-bottom: 5px;
    width: 100%;
}

simpread-urlscheme sr-urls-footer,
simpread-feedback sr-urls-footer {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

simpread-urlscheme sr-urls-a,
simpread-feedback sr-fb-a {
    color: #2163f7;
    cursor: pointer;
}

simpread-urlscheme text-field-state,
simpread-feedback text-field-state {
    border-top: none rgba(34, 101, 247, 0.8)!important;
    border-left: none rgba(34, 101, 247, 0.8)!important;
    border-right: none rgba(34, 101, 247, 0.8)!important;
    border-bottom: 2px solid rgba(34, 101, 247, 0.8)!important;
}

simpread-urlscheme switch,
simpread-feedback switch {
    margin-top: 0!important;
}

@keyframes srFadeInUp {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes srFadeInDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(100px);
    }
}

/**
 * Feeback
 */

simpread-feedback sr-fb-head {
    font-weight: bold;
}

simpread-feedback sr-fb-content {
    display: flex;
    flex-direction: column;
}

simpread-feedback sr-fb-footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    width: 100%;
}

/**
 * Feeback: stars
 */

 simpread-feedback sr-close {
    position: absolute;
    right: 20px;
    cursor: pointer;
    transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
    z-index: 200;
}

simpread-feedback sr-close:hover {
    transform: rotate(-15deg) scale(1.3);
}

simpread-feedback sr-stars {
    display: flex;
    flex-direction: row;
    justify-content: center;

    margin-top: 10px;
}

simpread-feedback sr-stars {
    display: flex;
    flex-direction: row;
    justify-content: center;

    margin-top: 10px;
}

simpread-feedback sr-stars i {
    margin-right: 10px;
    cursor: pointer;
}

simpread-feedback sr-stars i svg {
    transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
}

simpread-feedback sr-stars i svg:hover {
    transform: rotate(-15deg) scale(1.3);
}

simpread-feedback sr-stars i.active svg {
    transform: rotate(0) scale(1);
}

simpread-feedback sr-emojis {
    display: block;
    height: 100px;
    overflow: hidden;
}

simpread-feedback sr-emoji {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .3s;
}

simpread-feedback sr-emoji > svg {
    margin: 15px 0;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

simpread-feedback sr-stars-footer {
    display: flex;
    justify-content: center;
    margin: 10px 0 20px 0;
}